<template>
    <div class="search-box">
        <slot></slot>
        <div class="ipt-box">
            <input type="text" class="ipt" placeholder="城市名称/拼音" @keydown="entry" v-model="searchText" />
            <div class="icon-box">
                <i class="iconfont icon-sousuo icon"></i>
            </div>
        </div>
    
    </div>
</template>

<script>
    export default {
        name: "Search",
        props: {
            clearText: Boolean
        },
        data() {
            return {
                searchText: "",
                timer: {}
            }
        },
        methods: {
            //延时搜索
            entry() {
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => {
                    this.$emit("txtdata", this.searchText);
                }, 300);
            }
        },
        watch: {
            // 清除搜索内容
            clearText(val) {
                if (val) {
                    this.searchText = "";
                    this.entry();
                }
            },
        }
    };
</script>

<style lang="scss" scoped>
    @import "Search.scss";
</style>
